<template>
  <div class="game">
    <div class="game-list" v-for="(item, index) in gameList" :key="index" @click="goGame(index)">
      <div class="game-list-title">
        {{ item }}
      </div>
      <div v-for="(item1, index1) in scorePane(index)" :key="index1">
        <div class="game-list-title-label">{{ item1.label }}</div>
        <div class="game-list-title-score">{{ item1.historyNum }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, computed } from 'vue'
const gameList = ['贪吃蛇', '俄罗斯方块']
const emit = defineEmits(['goGame'])
const goGame = (index: number) => {
  emit('goGame', index + 1)
}
const scorePane = computed(() => {
  return (index: number) => {
    const gameConfig = [
      [
        {
          historyNum: localStorage.getItem('snackBestScore') || 0,
          label: '历史最佳分数'
        }
      ],
      [
        {
          historyNum: localStorage.getItem('blockBestRow') || 0,
          label: '历史最佳消灭行数'
        },
        {
          historyNum: localStorage.getItem('blockBestScore') || 0,
          label: '历史最佳分数'
        }
      ]
    ]
    return gameConfig[index]
  }
})
const bestRowNum = computed(() => {
  return localStorage.getItem('blockBestRow') || 0
})
const bestScore = computed(() => {
  return localStorage.getItem('blockBestScore') || 0
})
</script>

<style scoped lang="scss">
.game {
  width: 60%;
  height: 60%;
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  margin: auto;
  background-color: rgba($color: #fff, $alpha: 0.6);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 0 24px;
  &-list {
    padding: 8px;
    text-align: center;
    width: 200px;
    height: 200px;
    transition: all 0.3s;
    &:hover {
      box-shadow: 0 0 10px 0 #888;
    }
    &-title {
      margin-bottom: 8px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      &-label {
        color: #888;
        margin: 16px 0;
      }
      &-score {
        font-weight: 200;
      }
    }
  }
}
</style>
